<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('电话工单详情')"/>
  <!--<th:block th:include="include :: select2-css" />-->
  <link th:href="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.css}" rel="stylesheet">
  <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
  <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
  <link th:href="@{/css/iconfont/iconfont.css}" rel="stylesheet">
  <link th:href="@{/css/style.css}" rel="stylesheet">
  <link rel="stylesheet" type="text/css" th:href="@{/ajax/libs/qxEasyUI/themes/default/easyui.css}">


</head>
<style>
  .bootstrap-tagsinput > input {
    display: none;
  }

  .tworkformprocess-gjz {
    display: inline-block;
    background-color: #FAFAFA;
    padding: 3px;
    border-radius: 3px;
    margin: 3px;
  }

  label {
    font-weight: bold;
  }

  @font-face {
    font-family: 'huawen';
    src: url("/fonts/huawen.woff2");
  }
</style>

<body style="background-color: #F4F6FA; font-size: 13px;font-family:'huawen' ;font-weight: bold">
<div class="main-content" style="margin: 0;padding: 0;letter-spacing:2px;">

  <form id="form-user-add" th:object="${workFormBase}" class="form-horizontal" style="background-color: #F4F6FA">
    <input type="hidden" name="fromTelA" th:field="*{fromTelA}">
    <input type="hidden" name="fromName" th:field="*{fromName}">
    <input type="hidden" id="pkId" name="pkId" th:field="*{pkId}">
    <input type="hidden" id="getDealPk" name="getDealPk" th:field="*{getDealPk}">

    <div class="col-sm-12" style="display: flex;">
      <!--     左       -->
      <div class="col-sm-10 entering-page">
        <!--内上-->
        <div class="col-sm-12" style="margin-top: 10px;margin-bottom: 25px;">
          <div class="col-sm-12 tltieBoder">
            <div class="blueBorder"></div>
            <h4 style="margin:0 0 0 10px">来电内容</h4>
          </div>
          <!--来电类容-->
          <div id="fmContent"
               style="padding: 5px;background-color: #FAFAFA;border-radius: 12px; height: 100px">
            &nbsp;&nbsp;&nbsp;&nbsp;[[${telGetDeal.fmContent}]]
          </div>
          <!--工单内容-->
          <div class="col-sm-12 tltieBoder">
            <div class="blueBorder"></div>
            <h4 style="margin:0 0 0 10px">回复内容</h4>
          </div>
          <!--工单内容-->
          <div id="fmContent"
               style="padding: 5px;background-color: #FAFAFA;border-radius: 12px; height: 100px">
            &nbsp;&nbsp;&nbsp;&nbsp;[[*{doverDesc}]]
          </div>
        </div>
        <!--内左-->
        <div class="col-sm-6">
          <!--   来电基本信息     -->
          <div class="col-sm-12 tltieBoder">
            <div class="blueBorder"></div>
            <h4 style="margin:0 0 0 10px">来电基本信息</h4>
          </div>
          <!--事发地址-->
          <div class="form-group col-sm-12">

            <label class="col-sm-3 control-label  entering-pd">事发地址：</label>
            <div class="col-sm-9">
              <span class="tworkformprocess-span">[[*{fmAddress}]]</span>
              <input name="fmAddress" th:field="*{fmAddress}" type="hidden"/>
            </div>


          </div>

          <div class="form-group col-sm-12">
            <label class="col-sm-3  control-label entering-pd">流水号&nbsp;&nbsp;：</label>
            <div class="col-sm-9">
              <span class="tworkformprocess-span">[[*{wsCode}]]</span>
              <input name="wsCode" th:field="*{wsCode}" type="hidden"/>
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">提取码&nbsp;&nbsp;：</label>
            <div class="col-sm-9">
              <span class="tworkformprocess-span">[[*{wsKey}]]</span>
              <input name="wsKey" th:field="*{wsKey}" type="hidden"/>
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">被诉主体：</label>
            <div class="col-sm-9" id="tworkformprocess-zt">
              <input name="accSubject" th:field="*{accSubject}" type="hidden"/>
              <div class="tworkformprocess-gjz">[[*{accSubject}]]</div>
            </div>
          </div>
          <!--                    <div class="form-group col-sm-12">-->
          <!--                        <label class="col-sm-3 control-label entering-pd">工单主题：</label>-->
          <!--                        <div class="col-sm-9">-->
          <!--                            <span class="tworkformprocess-span">[[*{wsTopic}]]</span>-->
          <!--                        </div>-->
          <!--                    </div>-->
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">工单编号：</label>
            <div class="col-sm-9">
              <span class="tworkformprocess-span">[[*{workFormNo}]]</span>
              <input name="workFormNo" th:field="*{workFormNo}" type="hidden"/>
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">工单性质：</label>
            <div class="col-sm-9">
              <input name="setProName" th:field="*{setProName}" type="hidden"/>
              <input name="setProId" th:field="*{setProId}" type="hidden"/>
              <span class="tworkformprocess-span">[[*{setProName}]]</span>
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">坐席备注：</label>
            <div class="col-sm-9">
              <span class="tworkformprocess-span">[[*{xsysDesc}]]</span>
              <input name="xsysDesc" th:field="*{xsysDesc}" type="hidden">
            </div>
          </div>

          <!-- 标签-->
          <div class="form-group col-sm-12">
            <label class="col-sm-3  control-label entering-pd">关键词：</label>
            <div class="col-sm-9" id="tworkformprocess-bq">
              <input name="keyWord" th:field="*{keyWord}" type="hidden">
              <div class="tworkformprocess-gjz" th:each="key : *{#strings.arraySplit(keyWord,',')}"
                   th:text="${key}"></div>
            </div>
          </div>
          <!--单选-->
          <div class="form-group col-sm-12" style="line-height: 8px;margin-top: 8px;">
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">屏蔽号码：</label>
            <div class="col-sm-3">
              <span th:text="${telGetDeal != null ? telGetDeal.hideTel == 5 ? '是' : '否' : '否'}"></span>
            </div>
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">同意公开：</label>
            <div class="col-sm-3">
              <span th:text="${telGetDeal != null ? telGetDeal.openX == 1 ? '是' : '否' : '否'}"></span>
            </div>
          </div>
          <div class="form-group col-sm-12" style="margin-bottom: 0px">
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">重复来电：</label>
            <div class="col-sm-3">
              <span th:text="${telGetDeal != null ? telGetDeal.repeatFlag == 1 ? '是' : '否' : '否'}">否</span>
            </div>

            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">紧急联系：</label>
            <div class="col-sm-3">
              <span th:text="${telGetDeal != null ? telGetDeal.mark == 1 ? '是' : '否' : '否'}">否</span>
            </div>
          </div>

        </div>
        <!--内右-->
        <div class="col-sm-6" style="border-left: 1px solid #ebebeb">

          <!--   工单基本信息     -->
          <div class="col-sm-12 " style="display: flex;justify-content: space-between">
            <div class="tltieBoder">
              <div class="blueBorder"></div>
              <h4 style="margin:0 0 0 10px">工单基本信息</h4>
            </div>
          </div>

          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label  entering-pd">来电类型：</label>
            <div class="col-sm-9">
              <select name="dfmClaNo" id="dfmClaNo" required
                      th:with="telTypes=${@commonServiceImpl.findTelType()}"
                      onchange="dropChgSendTextOnly(this,'dfmClaName');"
                      class="form-control formSelect">
                <option value="">--请选择--</option>
                <th:block th:each="item : ${telTypes}">
                  <option th:text="${item['CSText']}" th:value="${item['CSValue']}"
                          th:selected="${item['CSValue'] eq workFormBase.dfmClaNo}"></option>
                </th:block>
              </select>
              <input type="hidden" name="dfmClaName" id="dfmClaName" th:value="*{dfmClaName}"/>
            </div>
          </div>
          <!--内容类别-->
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">内容类别：</label>
            <div class="col-sm-9">
              <input id="qxCT" th:value="*{dcntAname}" style="width:242px;height:31px;">
              <input id="txtDcntAcode" name="dcntAcode" type="hidden" th:value="*{dcntAcode}"/>
              <input id="txtDCntAName" name="dcntAname" type="hidden" th:value="*{dcntAname}"/>
            </div>
          </div>
          <!--工单主题-->
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd">工单主题：</label>
            <div class="col-sm-9">
              <input id="wsTopic" name="wsTopic" th:field="*{wsTopic}" placeholder="请输入"
                     class="form-control workTheme" type="text"
                     required="">
            </div>
          </div>
          <!--拟办期限-->
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label  entering-pd">拟办期限：</label>
            <div class="col-sm-9">
              <input name="deadline" th:field="*{wfLimit}" placeholder="请输入" class="form-control deadline"
                     type="text"
                     required="">
            </div>
            <div class="input-group-append " style="position: absolute;top: 10px;right: 40px;">
              <span class="glyphicon glyphicon-calendar "></span>
            </div>
          </div>

          <!-- 工单备注-->
          <div class="form-group col-sm-12">
            <label class="col-xs-3 control-label entering-pd">工单备注：</label>
            <div class="col-xs-9">
                                    <textarea name="wfRemark" th:field="*{wfRemark}" maxlength="3500"
                                              class="form-control workRemark"
                                              rows="3" style="height: 100px"></textarea>
              <span class="tworkformprocess-span">还可以输入<i class="workRemarkI">3500</i>个文字</span>
            </div>
          </div>
          <!-- 单选-->
          <div class="form-group col-sm-12">

            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">建议公开：</label>
            <div class="col-sm-3">
              <input name="openX" th:checked="*{openX == 1}" th:value="*{openX}" disabled type="checkbox"
                     data-size="small">

            </div>
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">是否督办：</label>
            <div class="col-sm-3">
              <input name="setProId2" th:checked="*{setProId == 21}" disabled type="checkbox"
                     data-size="small">
            </div>
          </div>
          <div class="form-group col-sm-12">
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">重点项目：</label>
            <div class="col-sm-3">
              <input name="project" type="checkbox" disabled data-size="small">
            </div>
            <label class="col-sm-3 control-label entering-pd" style="padding-top: 1px">摘报：</label>
            <div class="col-sm-3">
              <input name="reportFlag" th:checked="*{reportFlag == 1}" disabled th:value="*{reportFlag}"
                     type="checkbox" data-size="small">
            </div>
          </div>


        </div>
        <!--内下-->
        <!--                <div class="col-sm-12">-->
        <!--                    &lt;!&ndash;   拟办部门     &ndash;&gt;-->
        <!--                    <div class="col-sm-12 tltieBoder">-->
        <!--                        <div class="blueBorder"></div>-->
        <!--                        <h4 style="margin:0 0 0 10px">拟办部门</h4>-->
        <!--                    </div>-->
        <!--                    <div class="col-sm-12">-->
        <!--                        <table id="bootstrap-table"></table>-->
        <!--                    </div>-->
        <!--                </div>-->
      </div>
      <div style="position: fixed;top: 3%;right: 3%;">
        <div class="treturnReason_imgbox">
          <img class="treturnReason_img treturnReason_img-top" th:src="@{/img/label_yellow.png}">
          <div onclick="callbackRecord()"
               class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-top">回访记录
          </div>
        </div>
        <div class="treturnReason_imgbox">
          <img class="treturnReason_img treturnReason_img-bottom" th:src="@{/img/label_yellow.png}">
          <div onclick="operatingRecord()"
               class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-bottom">操作记录
          </div>
        </div>
        <div class="treturnReason_imgbox">
          <img class="treturnReason_img treturnReason_img-bottom" th:src="@{/img/label_yellow.png}">
          <div onclick="operationSendBackRecord()"
               class="treturnReason_Record treturnReason_Record-box treturnReason_Record-box-bottom">办理情况
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-switch/bootstrap-switch.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<!--<script th:src="@{/js/tworkformadd.js}"></script>-->
<!--<script th:src="@{/js/telsendorder.js}"></script>-->
<script th:src="@{/js/mailTelorder.js}"></script>
<script th:src="@{/js/teladd.js}"></script>


<script>
  //回访记录
  function callbackRecord() {
    var wfId = $('#pkId').val();
    var url = '/system/twfJudge/judgeList/' + wfId;
    var title = '回访记录';
    var width = "80%";
    var options = {
      url: url,
      title: title,
      width: width,
      skin: 'layui-layer-gray',
      btn: ['关闭'],
      yes: function (index, layero) {
        $.modal.close(index);
      }
    }
    $.modal.openOptions(options);
  }

  //操作记录
  function operatingRecord() {
    var wfId = $('#pkId').val();
    var url = '/system/workForm/workFormLog?pkId=' + wfId;
    var title = '操作记录';
    var width = "80%";
    var options = {
      url: url,
      title: title,
      width: width,
      skin: 'layui-layer-gray',
      btn: ['关闭'],
      yes: function (index, layero) {
        $.modal.close(index);
      }
    }
    $.modal.openOptions(options);
  }

  //派单记录
  function operationSendBackRecord(){
    var wfId = $('#pkId').val();
    var url = '/system/lookup/simulacrumList/' + wfId;
    var title = '办理情况';
    var width = "80%";
    var options = {
      url: url,
      title: title,
      width: width,
      skin: 'layui-layer-gray',
      btn: ['关闭'],
      yes: function (index, layero) {
        $.modal.close(index);
      }
    }
    $.modal.openOptions(options);
  }

  //延期列表
  function deferRecord() {
    var wfId = $('#pkId').val();
    var url = '/system/twfDefer/deferList/' + wfId;
    var title = '延期列表';
    var height = "850px";
    var width = "600px";
    var options = {
      url: url,
      title: title,
      height: height,
      width: width
    }
    popupDialog(options);
  }

  $('[name="openX"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      if (state === true) {
        $(this).val(1);
      } else {
        $(this).val(0);
      }
    }

  })
  $('[name="reportFlag"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      if (state === true) {
        $(this).val(1);
      } else {
        $(this).val(0);
      }
    }

  })
  $('[name="project"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      // alert('切换' + state);
    }

  })
  $('[name="setProId2"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      if (state === true) {
        $(this).val(21);
      } else {
        $(this).val(11);
      }
    }

  })
  //Bootstrap-switch单选按钮赋值
  $('[name="hideTel"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      // alert('切换' + state);
    }

  })
  $('[name="openFrom"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      // alert('切换' + state);
    }

  })
  $('[name="repeatFlag"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      // alert('切换' + state);
    }

  })
  $('[name="mark"]').bootstrapSwitch({
    onText: "是",
    offText: "否",
    onColor: "success",
    offColor: "info",
    size: "mini",
    onSwitchChange: function (event, state) {
      // alert('切换' + state);
    }

  })
  var a = $('#fmContent').text();
  $.ajax({
    url: "/api/bd/recommend",
    data: {title: '', content: a},
    type: "POST",
    dataType: "json",
    beforeSend: function () {
      $('#loading').modal('show');
    },
    complete: function () {
      $('#loading').modal('hide');
    },
    success: function (data) {
      // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
      var contentObj = document.getElementsByClassName("content")[0];
      if (data.data.length == 0) {
        contentObj.innerHTML = '没有数据';
      } else {
        var isHtml = "";
        var arr = data.data;

        for (var i = 0; i < data.data.length; i++) {
          //       console.log(arr[i])
          isHtml += '<div class="col-sm-12 work-box">';
          isHtml += '<div class="work-box-top">';
          isHtml += '<div class="col-sm-12 work-box-top-box">';
          isHtml += '<div class="col-sm-6"><a  class="work-box-a" ><span style="">' + arr[i].title + '</span></a></div>';
          isHtml += '<div class="col-sm-6 control-label" style="display: flex;align-items: center;padding: 0;justify-content: flex-end">';
          isHtml += '<button type="button" class="btn btn-sm btn-primary" style="color: #206ef7;background-color: white;margin-right: 15px;">流程中';
          isHtml += '</button>';
          isHtml += '<i class="fa fa-chevron-circle-right"></i>';
          isHtml += '</div>';
          isHtml += '</div>';
          isHtml += '<div class="col-sm-12 work-box-class">' + arr[i].content + '</div>';
          isHtml += '<div class="col-sm-12 work-box-buttom">';
          // isHtml += '<div class="col-sm-6">' + arr[i].subject + '</div>';
          isHtml += '<div class="col-sm-8">' + arr[i].publish_time + '</div>';
          isHtml += '<div class="col-sm-4">';
          isHtml += '<div class="work-buttom control-label" style="margin: 0;padding: 0" onclick="copy(' + '\'' + arr[i].id + '\'' + ')">一键复制</div>';
          isHtml += '</div>';
          isHtml += '</div>';
          isHtml += '</div>';
          isHtml += '</div>';
        }
        ;
        contentObj.innerHTML = isHtml;
      }

    }

  });

  var prefix = ctx + "system/mTelRcd";
  var send = ctx + "system/sendBack";
  var work = ctx + "system/workForm";

  function dispatch() {
    if ($.validate.form()) {
      let data = $('#form-user-add').serializeArray();
      $.operate.saveTab(work + "/dispatch", data);
    }
  }

  $('#qxCT').combotree({
    url: '/system/common/findContentCate',
    required: false,
    onSelect: function (record) {
      $("#txtDcntAcode").val(record.id);
      $("#txtDCntAName").val(record.text);
      var dfmClaName = $("#dfmClaNo option:selected").text();
      var fromName = $("#fromName").val();
      $("#wsTopic").val(fromName + '[' + dfmClaName + ']' + record.text);
    }
  });

  function proposed() {
    let pkId = $('#pkId').val();
    var url = send + "/proposed/" + pkId;
    var width = '80%';
    $.modal.open('拟办部门', url, width);
  }

  $('#dfmClaNo').change(function () {
    var dfmClaName = $("#dfmClaNo option:selected").text();
    var txtDCntAName = $("#txtDCntAName").val();
    var fromName = $("#fromName").val();
    $("#wsTopic").val(fromName + '[' + dfmClaName + ']' + txtDCntAName);
  })

  var sensitiveInfo = new Object()

  function setSensitiveId(id) {
    // sensitiveInfo.cardId = data[0].value;
    // sensitiveInfo.militaryId = data[1].value;
    // sensitiveInfo.realName = data[2].value;
    // sensitiveInfo.medicalCardNum = data[3].value;
    // sensitiveInfo.other = data[4].value;
    $('#sensitiveId').val(id);
  }

  function clo(){
    //TODO
    $.modal.closeTab()
    $.modal.closeAll();
  }
</script>
</body>
</html>

